<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>标签页插件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
	<style>
		#content {
			padding: 10px;
		}
	</style>
</head>
<body style="margin: 100px;">
<!-- 
	1.基本实例
		1)	.tab-content 			//对.content层添加
		2)	.tab-pane 				//对每一项内容li添加(搭配.active,还有每个锚点)
		3)	data-toggle="tab"		//对每一个对应的锚点身上a添加(不是li)
		
	2.效果
		1)	.fade 					//淡入淡出。对每一项内容添加
		2)  .in 					//一开始显示就内容

	3.使用javascript的方法
		$('#nav a').on('click', function (e) { 			//是'#nav a'不是'#nav'
			e.preventDefault();					    	//阻止事件默认行为
			$(this).tab('show');
		})

		它的事件类型(是"."不是"-")
			1) show.bs.tab 								//标签切换之前触发
			2) shown.bs.tab   							//标签切换之后触发
				$('#nav a').on('show.bs.tab', function () {
					//标签切换之前触发
				})

 -->


 	<!-- 声明式方法 -->
	<!-- <ul class="nav nav-tabs"> -->
 	<!-- <ul class="nav nav-pills">
		<li class="active"><a data-toggle="tab" href="#html5">HTML5</a></li>
		<li><a data-toggle="tab" href="#bootstrap">Bootstrap</a></li>
		<li><a data-toggle="tab" href="#jquery">JQuery</a></li>
		<li><a data-toggle="tab" href="#extjs">ExtJS</a></li>
	</ul> -->

	<!-- javascript方法 -->
	<ul class="nav nav-pills" id="nav">
		<li class="active"><a href="#html5">HTML5</a></li>
		<li><a href="#bootstrap">Bootstrap</a></li>
		<li><a href="#jquery">JQuery</a></li>
		<li><a href="#extjs">ExtJS</a></li>
	</ul>

	<div id="content" class="tab-content">
		<p class="tab-pane fade in active" id="html5">标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。</p>
		<p class="tab-pane fade" id="bootstrap">Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。[1]  它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。[2]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。</p>
		<p class="tab-pane fade" id="jquery">JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。</p>
		<p class="tab-pane fade" id="yui">YUI 库，全称Yahoo! UI Library。是一组工具和控件，用JavaScript写成, 为的是用DOM 脚本，DHTML和AJAX等技术创建丰富的网页交互式应用程序。YUI基于BSD协议，对所有的使用方式都是免费的。YUI项目包括YUI库和两个创建时工具： YUI Compressor (压缩) 和 YUI Doc （JavaScripts代码的文档引擎）。</p>
		<p class="tab-pane fade" id="extjs">自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。</p>
	</div>

	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
	<script>
		$('#nav a').on('click', function () {
			$(this).tab('show')
		})

		/*$('#nav a').on('show.bs.tab', function () {
			alert('标签切换之前触发');
		})*/
	</script>
</body>
</html>